<template>
    <div style="display:flex;justify-content: center;align-items: center;height: 662px;background-position-y: -100px; background-image: url('http://ruuqwf8y6.hn-bkt.clouddn.com/desktop.jpg');">
      <div class="form-class">
        <img class="logo" src="http://ruuqwf8y6.hn-bkt.clouddn.com/nav-logo.png"/>
        
               <el-form :model="form" :rules="rules" ref="form" label-width="80px" >
                   <div v-if="!forgetPwd">
                       <div v-if="form.type == '1'" style="margin-left:-30px;color: green;">
                           <el-form-item prop="username" style="margin-top:30px;">
                                <span slot="label">
                                    <span style="color: black">账号</span>
                                </span>
                               <el-input v-model="form.username" placeholder="请输入账号" />
                           </el-form-item>
                           <el-form-item prop="password">
                                <span slot="label">
                                    <span style="color: black">密码</span>
                                </span>
                               <el-input type="password" v-model="form.password" placeholder="请输入密码" />
                           </el-form-item>
                           <el-form-item>
                               <el-button type="primary" @click="submit" :loading="load" style="width: 100%">{{ loginButton }}</el-button>
                               <el-button @click="forget" type="text" style="color:#023c00">忘记密码？</el-button>
                               <el-button @click="clickPhone" type="text" style="color:#023c00">手机验证码登录</el-button>
                           </el-form-item>
                       </div>
                       <div v-if="form.type == '2'" style="margin-left:-30px">
                           <el-form-item prop="phoneNumber">
                                <span slot="label">
                                    <span style="color: black">手机号</span>
                                </span>
                               <el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
                           </el-form-item>
                           <el-form-item  prop="code">
                                <span slot="label">
                                    <span style="color: black">验证码</span>
                                </span>
                               <el-input  v-model="form.code" placeholder="请输入验证码">
                                   <el-button slot="append" :disabled="disabled" @click="sendSms">{{codeText}}</el-button>
                               </el-input>
                               
                           </el-form-item>
                           <el-form-item>
                               <el-button type="primary" @click="submit" :loading="load" style="width: 100%">{{ loginButton }}</el-button>
                               <el-button @click="forget" type="text" style="color:#023c00">忘记密码？</el-button>
                               <el-button @click="clickPhone" type="text" style="color:#023c00">用户名登录</el-button>
                           </el-form-item>
                       </div>
                   </div>
                   <div v-else >
                       <el-form-item  prop="email">
                                 <span slot="label">
                                    <span style="color: black">邮箱</span>
                                </span>
                           <el-input v-model="form.email" placeholder="请输入忘记密码账号的邮箱" />
                       </el-form-item>
                       <el-button type="primary" @click="findPassword" style="width: 100%">找回密码</el-button>
                       <el-button type="text" @click="forget" style="margin-left:0;color:#023c00">返回登录</el-button>

                   </div>
               </el-form>
            
       
      </div>
    </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
        disabled:false,
        forgetPwd:false,
        form: {
            username: null,
            password: null,
            type: '1',
            code: null,
            phoneNumber: null
        },
        rules: {
          //用户名表单校验
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
            email: [
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ],
            phoneNumber: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                {  message: '请输入正确的邮箱地址',pattren: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/}
            ],
            code: [
                { required: true, message: '请输入验证码', trigger: 'blur' }
            ]
        },
          loginButton:'登          录',
          load: false,
        codeText:'发送验证码'
      }

  },
  /**
   * 存放所有方法
   */
  methods: {
    
      /**
       * 发送验证码
       */
      sendSms(){
          const pattren = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
          //判断手机号码是否填写
          if (!this.form.phoneNumber ) return this.$message.error('请输入手机号码！');
          if (!pattren.test(this.form.phoneNumber)) return this.$message.error('请输入正确的手机号码！');
          this.$ajax.post(`/tool/sms?phoneNumber=${this.form.phoneNumber}`).then(res=>{
              if (res.data.flag){
                  let time = 60;
                  const timer =  setInterval(()=>{
                      this.disabled = true;
                      time--;
                      if (time){
                          this.codeText = '('+time+'秒)后重新发送'
                      }else {
                          clearInterval(timer);
                          this.disabled = false;
                          this.codeText = '重新发送验证码';
            
                      }
                  },1000);
              }
              
          })
          
          
      },
    
      /**
       * 登录方式切换
       */
      clickPhone(){
          if (this.form.type == '1'){
              this.form.type = '2'
          }else {
              this.form.type = '1'
          }
          //移除表单校验结果
          this.$refs.form.clearValidate();
      },
      /**
       * 忘记密码
       */
      forget(){
            this.forgetPwd = !this.forgetPwd;
      },
      /**
       * 找回密码
       */
      findPassword(){
          this.$refs.form.validate((valid) =>{
              if (!valid){
                  return this.$message.error('数据校验失败，请查询后提交！');
              }
              //如果数据校验成功，向后端发请求，进行登录！
              this.$ajax.post('/tool/forget/password',{ receivers:[this.form.email] }).then((res) =>{
                    if (res.data.flag){
                        this.$message.success(res.data.message);
                        this.forgetPwd = false;
                    }
              }).catch(()=>{
              });
          });
      
      },
      
      /**
     * 登录方法
     */
    submit(){

        this.$refs.form.validate((valid) =>{
          if (!valid){
            return this.$message.error('数据校验失败，请查询后提交！');
          }
          this.load = true;
          this.loginButton = '登录中...'
          //如果数据校验成功，向后端发请求，进行登录！
          this.$ajax.post('/user/login',this.form).then((res) =>{
            const tokenBody = res.data.data;
            let tokenHead = tokenBody.tokenHead;

            let token = tokenBody.token;
            this.$store.commit('setToken', tokenHead + token);
            this.$router.push('/')
          }).catch(()=>{
             this.load = false;
             this.loginText = "登          录";
          });
        });
    },
    /**
     * 重置方法
     */
    reset(){
      //将整个表单进行重置，并移除校验效果
        this.$refs.form.resetFields();
    }


  }
};
</script>

<style scoped>
  .form-class{
    width: 30%;
  }
  .logo{
    width: 100px;
    margin-bottom: 20px;
  }

</style>